<template>
	<div class="header">
		<el-menu mode="horizontal" class="nav-header">
			<el-submenu class="nav-header" index="profileNav" style="float: right;">
				<template slot="title">
					工号{{ memberNum }}
				</template>
				<el-menu-item index="logout" class="header-child-font" @click.native="logout">
					<i class="el-icon-s-release"></i>
					退出登录
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
import {
	mapState
} from 'vuex'

export default {
	name: 'Header',
	computed: {
		...mapState({
			memberNum: (state) => state.login.memberNum
		})
	},
	methods: {
		async logout() {
			this.$confirm('确定退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.dispatch('LogOut').then(() => {
					location.href = '/login'
				})
			}).catch(() => { });
		}
	}
}
</script>

<style lang="scss">
.header {
	position: fixed;
	width: 100%;
	z-index: 998;
}

.header-child-font {
	font-weight: 100;
	letter-spacing: 3px;
}
</style>
